<template>
  <div class="pubilc-text-reply app-main-content-box">
    <div class="app-main-top-box">
      <div class="title">文本消息</div>
      <el-button
        type="primary"
        size="medium"
        round
        @click="openDialogReply('add')"
        v-if="!showNoAuth"
      >新建消息</el-button>
      <!-- <el-button type="danger" icon="el-icon-minus" @click="handleDeleteAll">批量删除</el-button> -->
    </div>

    <div v-if="!showNoAuth">
      <!-- 消息头部 -->
      <div class="reply-header clearfix">
        <!-- 搜索 -->
        <div class="reply-search">
          <el-input placeholder="请输入关键字" prefix-icon="el-icon-search" v-model="searchKeyWord"></el-input>
          <el-button type="primary" size="medium" round @click="searchReplyByKeyword">搜 索</el-button>
        </div>
      </div>

      <!-- 消息内容 -->
      <div class="reply-content">
        <el-table
          :data="list"
          border
          style="width: 100%"
          v-loading="tableLoading"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="keyword" label="关键词"></el-table-column>
          <el-table-column prop="content" label="消息内容"></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="openDialogReply('edit',scope.row)">修改</el-button>
              <el-button type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination-direction
          v-if="paginationConfig.total!==0"
          :config="paginationConfig"
          @sizeschange="sizesChange"
          @pagechange="pageChange"
        ></pagination-direction>
      </div>
    </div>

    <!-- 弹框 -->
    <dialog-reply ref="dialogReply"></dialog-reply>
    <!-- 未授权公众号 -->
    <wx-auth-tips v-if="showNoAuth" source="public"></wx-auth-tips>
  </div>
</template>

<script>
  import { mapActions } from "vuex";
  import DialogReply from "./components/DialogReply.vue";
  import { getReplylList, delReply, searchReply } from "@/api/wechat.js";
  export default {
    components: {
      DialogReply
    },
    data() {
      return {
        /**
         * 表单校验字段相关
         */
        rules: {
          keyword: [
            { required: true, message: "请输入关键字", trigger: "blur" },
            {
              min: 1,
              max: 30,
              message: "关键词不能为空且最多30个字符",
              trigger: ["blur", "change"]
            }
          ],
          content: [
            { required: true, message: "请输入回复消息内容", trigger: "blur" },
            {
              min: 1,
              max: 300,
              message: "回复消息内容不能为空且最多300个字符",
              trigger: ["blur", "change"]
            }
          ]
        },
        // 配置
        //分页配置
        paginationConfig: {
          direction: "center", // 分页位置
          layout: "total, sizes, prev, pager, next, jumper", // 分页类型
          pageSizes: [10, 20], // 分页pages
          total: 0,
          page: 1, // 页数-默认1
          pageSize: 10 // 每页条数-默认10
        },
        // 状态
        tableLoading: true, //表格loading
        showNoAuth: false, // 是否授权
        // 数据
        list: [], //表格数据
        searchKeyWord: "", //搜索关键词
        delReplyIds: [],
        //新增修改临时数据
        reply: {
          keyword: "",
          content: "",
          type: "text"
        }
      };
    },
    mounted() {
      this.checkAuth();
    },
    methods: {
      /**
       * 获取数据
       */
      ...mapActions(["getAuthMp"]),
      // 检验是否授权了
      checkAuth() {
        this.getAuthMp().then(() => {
          this.$store.state.wechat.mpInfo.default.appId
            ? this.initData()
            : (this.showNoAuth = true);
        });
      },

      // 获取消息数据
      initData(
        page = this.paginationConfig.page,
        pageSize = this.paginationConfig.pageSize
      ) {
        this.tableLoading = true;
        getReplylList(page, pageSize)
          .then(res => {
            this.tableLoading = false;
            this.list = res.data.list;
            this.paginationConfig.total = res.data.total;
            this.paginationConfig.page = res.data.pageNum;
          })
          .catch(err => {
            this.tableLoading = false;
          });
      },

      // 分页sizes改变
      sizesChange() {
        this.initData();
      },

      // 分页page改变
      pageChange() {
        this.initData();
      },

      /**
       * 按钮组
       */
      // 点击搜索
      searchReplyByKeyword() {
        if (this.searchKeyWord != "") {
          searchReply(this.searchKeyWord)
            .then(res => {
              this.list = [res.data];
            })
            .catch(err => {});
        } else {
          this.initData(1);
        }
      },

      //多选状态栏改变
      handleSelectionChange(rows) {
        if (rows) {
          let ids = [];
          rows.map(item => {
            ids.push(item.id);
          });
          this.delReplyIds = ids;
        }
      },

      //点击新建
      openDialogReply(type, item) {
        this.$refs.dialogReply.open(type, item).then(res => {
          this.initData(1);
        });
      },

      //点击批量删除
      handleDeleteAll() {},

      // 点击删除
      handleDelete(index, row) {
        this.$confirm("此操作将永久删除该消息, 是否继续?", "删除提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          center: true,
          roundButton: true
        })
          .then(() => {
            delReply(row.id)
              .then(res => {
                this.$notify({
                  title: "成功",
                  message: "删除成功",
                  type: "success",
                  duration: 2000,
                  offset: 40
                });
                this.initData();
              })
              .catch(err => {});
          })
          .catch(() => {});
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .pubilc-text-reply {
    .reply-header {
      // margin: 10px;
      .el-input {
        width: 400px;
        margin-right: 10px;
      }
    }
    .reply-content {
      margin: 20px 0;
      .el-table {
        margin-bottom: 10px;
      }
    }
  }
</style>
